import React, { useState, useEffect } from 'react'

import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';

import './Login.css'
import md5 from 'md5';

/// props.setUser(userInfo) ;
function Login(props) {

    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [loginErrorMsg, setLoginErrorMsg] = useState('');

    const handleSubmit = async e => {
        e.preventDefault();

        if (username === '') return;
        if (password === '') return;
        const md5pwd = md5(password);

        let formdata = new FormData();
        formdata.append("uname", username);
        formdata.append("password", md5pwd);

        const url = global.g_serverAPIRoot + "user/login";
        fetch(url, {
            method: 'POST',
            body: formdata,
        })
            .then(response => response.json())
            .then(result => {
                if (result.state !== 0) {
                    setLoginErrorMsg(result.message);
                } else {
                    setLoginErrorMsg('');
                    props.setUser(result.data);
                }
            }).catch(err => {
                setLoginErrorMsg(err);
            });
    }

    return (
        <div style={{
            margin: 'auto',
            height: '100%',
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center'
        }}>
            <div style={{
                width: '800px', height: '450px', margin: 'auto',
                backgroundImage: "url(/images/login_bg900.jpg)",
            }}
                className='logincard'
            >
                
                <Form onSubmit={handleSubmit} style={{
                    position: 'relative',
                    left: '500px',
                    top: '75px',
                    width: '280px', height: '320px',
                    padding: '20px',
                    paddingTop: '80px',
                    backgroundImage: "url(/images/login_inner_frame.png)",
                }}>
                    <Form.Group className="mb-3" >
                        <Form.Label style={{paddingRight:'0px'}}>用户名</Form.Label>
                        <Form.Control 
                            placeholder='用户名' 
                            type='text'  
                            value={username}
                            onChange={e => setUsername(e.target.value)}
                            />
                    </Form.Group >
                    <Form.Group className="mb-3">
                        <Form.Label style={{paddingRight:'0px'}}>密码</Form.Label>
                        <Form.Control 
                        placeholder='密码' 
                        type='password' 
                        value={password}
                        onChange={e => setPassword(e.target.value)}
                        />
                    </Form.Group >
                    <div style={{ clear: 'both' }}></div>
                    <Form.Group className="mb-4">
                        <Button variant="secondary" 
                        style={{width:'80px',color:'black',borderWidth:'0px',backgroundColor:'rgb(224, 225, 226)'}} 
                        type='submit'>登录</Button>
                    </Form.Group>
                    <div style={{ color: 'red' }}>{loginErrorMsg}</div>
                </Form>
                <div style={{ position: 'relative', bottom: '-106px', marginLeft: '20px' }}>版本:{global.g_version}</div>
            </div>

        </div>
    )
}

export default Login



